<template>
  <view class="safe-area-container">
    <view class="container">
      <!-- 固定的顶部区域 -->
      <view class="fixed-header">
        <!-- 顶部标题区 -->
        <view class="header">
          <view class="header-content">
            <text class="title">分类管理</text>
            <view class="edit-btn" @tap="toggleEditMode">
              {{ isEditing ? '完成' : '编辑' }}
            </view>
          </view>
        </view>
      </view>


      <view class="content">
        <!-- 分类列表 -->
        <view class="category-list">
          <view class="category-item" v-for="(category, index) in categories" :key="index">
            <view class="category-header">
              <view v-if="!isEditing" class="category-title">{{ category.name }}</view>
              <input v-else type="text" v-model="category.name" class="category-input"
                     placeholder="输入分类名称"/>
            </view>

            <!-- 设备列表 -->
            <view class="device-list">
              <view class="device-item" v-for="(device, deviceIndex) in category.devices" :key="deviceIndex">
                <view class="device-info">
                  <image :src="getDeviceIcon(device.type)" mode="aspectFit" class="device-icon"></image>
                  <text class="device-name">{{ device.name }}</text>
                </view>
                <view v-if="isEditing" class="device-actions">
                  <picker @change="(e) => moveDevice(index, deviceIndex, e.detail.value)"
                          :range="getCategoryOptions(index)"
                          class="category-picker">
                    <text class="move-btn">移动到其他分类</text>
                  </picker>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

    </view>
  </view>

</template>

<script>
import furniture from "./furniture";
export default furniture;
</script>

<style>
@import "furniture.css";
</style>